<template>
	<view>
		<view class="promoterItem"
			@click="$util.redirectTo('/otherpages/shopSpreadDetali/shopSpreadDetali',{id:item.id})">
			<view class="flex_b" style="align-items: flex-start;">
				<image :src="$util.img(item.avatar)" mode="aspectFill"></image>
				<view class="w-522">
					<view class="flex_b">
						<view class="font-30 font-weight">{{item.realname}}</view>
						<view class="font-28 f-t">{{item.score}}分</view>
					</view>
					<view class="font-24 grey m-b-14 m-t-4">{{item.introduce}}</view>
					<scroll-view scroll-x="true" class="label">
						<view v-for="(item,index) in labelReturn(item.label)" :key="index" class="font-22 m-r-8">
							{{item}}
						</view>
					</scroll-view>

				</view>
			</view>
			<view class="flex_b m-t-30">
				<view class=""></view>
				<view class="flex buttonRight" v-if="type=='list'">
					<view class="buttonRightA" @click.stop="$util.plone(item.mobile)">联系</view>
					<view class="buttonRightB" @click.stop="bindFn(item)">绑定</view>
					<!-- <view class="buttonRightC">已绑定</view> -->
				</view>
				<view class="flex_b buttonRightMy w-512" v-if="type=='my'">
					<view class="">
						<view class="font-24">{{item.realname||''}}</view>
						<view class="font-24 grey">昵称</view>
					</view>
					<view class="">
						<view class="font-24">{{item.mobile||''}}</view>
						<view class="font-24 grey">电话</view>
					</view>
					<view class="">
						<view class="font-24">{{item.wechat||''}}</view>
						<view class="font-24 grey">微信号</view>
					</view>
					<view class="w-56 h-56 bor-28 textC lh-56" @click.stop="evaluate(item)"
						style="background-color: #fceee8;">
						<view class="iconfont icon-xiaolianmanyifuwu textC lh-56 f-t"></view>
					</view>
				</view>
			</view>
		</view>

		<uv-popup ref="popupPLone" round="8" :safeAreaInsetBottom="false" :closeable="true">
			<view class="payBox flex_c" style="justify-content: center !important;">
				<view class="font-28 m-b-20 m-l-50">昵称：{{realname||''}}</view>
				<view class="font-28 m-b-20 m-l-50">电话：{{mobile||''}}</view>
				<view class="font-28 m-l-50 m-b-50">微信号：{{wechat||''}}</view>
				<button type="primary" style="border-radius: 50rpx;" @click="bindSubmit">绑定</button>
			</view>
		</uv-popup>

		<view class="bottom-mar"></view>
	</view>
</template>

<script>
	export default {
		props: ['type', 'item'],
		name: "promoter",
		data() {
			return {
				type: '',
				mobile: '',
				realname: '',
				id: '',
				wechat: ''
			};
		},
		methods: {
			// bindShop() {
			// 	// 确认绑定
			// 	this.$api.sendRequest({
			// 		url:'/api/shop/bindpromoter',
			// 		data:{
			// 			id:this.shopItem.id,
			// 			promoter_id:this.id
			// 		}
			// 	})
			// },
			bindSubmit() {
				// 选择商铺绑定
				this.$util.redirectTo('/otherpages/myShopHire/myShopHire', {
					type: 'select'
				})
				this.$refs.popupPLone.close();
			},

			evaluate(item) {
				// 去评价
				this.$util.redirectTo('/otherpages/evaluate/evaluate', {
					id: item.id
				})
			},

			// 打开绑定弹窗
			bindFn(item) {
				this.mobile = item.mobile
				this.realname = item.realname
				this.wechat = item.wechat
				this.id = item.id
				this.$emit('getId', item.id)
				this.$refs.popupPLone.open('center');
			},

			// 展示标签的方法
			labelReturn(label) {
				if (label) {
					return label.split(',')
				} else {
					return []
				}
			}
		}
	}
</script>

<style lang="scss">
	.payBox {
		width: 426rpx;
		height: 270rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 30rpx 25rpx;
	}

	.buttonRightMy {
		margin-top: -26rpx;
	}

	.buttonRight {
		margin-top: -16rpx;
		margin-bottom: 30rpx;

		view {
			margin-left: 16rpx;
			width: 144rpx;
			height: 56rpx;
			border-radius: 28rpx;
			opacity: 1;
			box-sizing: border-box;
			text-align: center;
			line-height: 56rpx;
			color: #fff;
		}

		.buttonRightA {
			border: 2rpx solid #E5632B;
			color: $color-sub;
		}

		.buttonRightB {
			background: #E5632B;
		}

		.buttonRightC {
			background: #CCCCCC;
		}
	}

	.promoterItem {
		border-bottom: 1rpx solid #f7f7f7;
		padding-bottom: 20rpx;

		image {
			border-radius: 16rpx;
			border: 2rpx solid rgba(245, 246, 247, 1);
			width: 168rpx;
			height: 168rpx;
		}

		.label {
			width: 522rpx;
			white-space: nowrap;
			/* 第二步：溢出隐藏 */
			overflow: hidden;

			view {
				display: inline-block;
				padding: 4rpx 10rpx;
				border-radius: 4px;
				opacity: 1;
				background: linear-gradient(0deg, #F1F4F8, #F1F4F8), #FFF8F5;
				font-family: PingFangSC;
				font-size: 20rpx;
				font-weight: normal;
				text-align: center;
				color: #58352B;
			}
		}
	}
</style>
